<template>
  <!--会议记录-->
  <div>
      <public-search
        :fields="fields"
        :search-param="form"
        @on-query="onQuery"
        @on-reset="onReset"/>
      <public-table
        :page="page"
        :table-data="tableData"
        :table-option="tableOption"
        @page-change="onPageChange"
      >
        <template #buttons="scope">
          <el-button
                  class="button_funtion"
                  size="large"
                  @click="onSubmitResult(scope.row)"
          >上传会议结果</el-button>
            <el-button
                    class="button_view"
                    size="large"
                    @click="onDetails(scope.row)"
            >查看</el-button>
        </template>
      </public-table>
  </div>

  <public-form-popup
         ref="publicFormPopupRef"
         :popup-params="{
              width:'40%',
              title:'上传会议结果',
              loadingText:'数据提交中...',
              confirmButtonTitle:'确认'
            }"
        :form="editForm"
        :fields="editFields"
        popup-type="add"
       :confirm-params="{
          fun:(form,isLoading)=>{
            isLoading.value = true;
            investmentDailyApi.addResult(editForm).then(res=>{
                if(res.code === '200'){
                  isLoading.value = false;
                  ElMessage.success('上传会议结果成功!');
                  publicFormPopupRef.close();
                  onQuery();
                }else{
                  publicFormPopupRef.close();
                  isLoading.value = false;
                  ElMessage.error('上传会议结果失败!');
                }
            })
          }
       }"
  />

  <public-form-popup
          ref="publicFormPopupRef2"
          :popup-params="{
            width:'40%',
            title:'会议-详情',
            footerButton:false,
            loadingText:'数据提交中...',
            confirmButtonTitle:'确认'
          }"
          :form="editForm"
          :fields="queryFields"
          popup-type="add"
  >
      <template #fileList="data">
          <div class="d-flex flex-column m-t10">
              <div
                  v-for="(item,index) in editForm[data.data.key]"
                 :key="index"
              >
                   <span>{{item.fileName}}</span>
                  <span
                      class="m-l20"
                      style="cursor: pointer;color: #fc7040;"
                      @click="download(item)"
                  >下载</span>
              </div>
          </div>
      </template>
  </public-form-popup>
</template>

<script setup>
import PublicSearch from "@/components/PublicSearch.vue";
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {tableCommonFun} from "@/hooks/tableCommon";
import PublicTable from "@/components/PublicTable.vue";
import PublicFormPopup from "@/components/publicFormPopup.vue";
import {fileApi, investmentDailyApi} from "@/api/investment";
import {ElMessage} from "element-plus";
import {exportFile} from "@/common/utils/GlobalUtils";

const router = useRouter();
const getProjectId = router.currentRoute.value.params.projectId;

const fields = ref([
    {
        type:'input',
        label:'关键字',
        key:'keyword',
        placeholder:'请输入项目名称或者关键字搜索',
        clearable:true
    },
    {
        type:'datetimerange',
        label:'发起时间',
        key:'valueTime',
        startTimeName:'startTime',
        endTimeName:'endTime',
        placeholder:'请选择创建时间',
        clearable:true,
        fun:(e,params)=>{
            if(e && e instanceof Array && e.length>0){
                form.value[params.startTimeName] = e[0];
                form.value[params.endTimeName] = e[1];
            }
            if(!e || (e instanceof  Array && e.length===0)){
                form.value[params.startTimeName] = '';
                form.value[params.endTimeName] = '';
            }
        }
    },
]);


const interfaceConfig = reactive({
    fileName:'investment',
    apiPath:'meetingsManagementApi.getProjectInvestmentDaily',
});

const exportConfig = reactive({
    fileName:'investment',
    apiPath:'meetingsManagementApi.exportMeetings',
    tableName:'会议记录表'
});

/**
 * 默认参数
 * @type {UnwrapNestedRefs<{prepareStatus: number}>}
 */
const defaultParameters = reactive({
    projectId: getProjectId
});

const {
    form,
    page,
    tableOption,
    tableData,
    onQuery,
    onReset,
    onPageChange,
    getData,
    onExport
}  = tableCommonFun(interfaceConfig,exportConfig,defaultParameters);

tableOption.value = [
  { label: "项目名称", prop: "projectName", minWidth: 100 },
  { label: "会议名称", prop: "meetingName", minWidth: 100 },
  { label: "会议类型", prop: "type", minWidth: 100 },
  { label: "会议时间", prop: "dateTime", minWidth: 150 },
  { label: "会议内容", prop: "meetingContext", minWidth: 100 },
  { label: "参会人员", prop: "participants", minWidth: 100 },
  {
    label: "会议结果", prop: "status", formatter: (val) => {
      return { '-1': '未通过', '1': '通过' }[val] || '-';
    }, minWidth: 100
  },
  { label: "发起时间", prop: "createTime", minWidth: 150 },
  {
    label: "操作", prop: 'buttons', slot: true, width: 300
  }
];

form.value= {
    startTime:'',
    endTime:'',
    keyword:'',
}

const editForm = reactive({
    projectName:'',
    meetingName:'',
    participants:'',
    type:'',
    dateTime:'',
    meetingContext:'',
    meetingId:'',
    status:'',
    resultRemark:'',
    fileList:[],
});

const editFields = [
    {
        label:'项目名称',
        type:'input',
        key:'projectName',
        required: false,
        disabled:true,
        width:300
    },
    {
        label:'会议名称',
        type:'input',
        key:'meetingName',
        required: false,
        disabled:true,
        width:300
    },
    {
        label:'参会人员',
        type:'input',
        key:'participants',
        required: false,
        disabled:true,
        width:300
    },
    {
        label:'会议类型',
        type:'input',
        key:'type',
        required: false,
        disabled:true,
        width:300
    },
    {
        label:'会议时间',
        type:'input',
        key:'dateTime',
        required: false,
        disabled:true,
        width:300
    },
    {
        label:'会议内容',
        type:'input',
        key:'meetingContext',
        required: false,
        disabled:true,
        width:300
    },
    {
        label: '会议结果',
        type:'select',
        key:'status',
        width:300,
        clearable:true,
        placeholder:'请选择会议结果',
        message:'请选择会议结果',
        event:'change',
        options:{
            labelKey:'label',
            valueKey:'value',
            list:[
                {
                    label:'驳回',
                    value:-1
                },
                {
                    label:'通过',
                    value:1
                }
            ]
        },
    },
    {
        label:'会议结果说明',
        type:'textarea',
        key:'resultRemark',
        required: false,
        width:300,
        rows:4,
        placeholder:'请输入会议内容',
        message:'请输入会议内容',
    },
    {
        label: '会议附件',
        type:'upload',
        key:'fileList',
        width:300,
        uploadType:'Array',
        clearable:true,
        placeholder:'请上传附件',
        message:'请上传附件',
        event:'change',
        interfaceConfig:{
            fileName:'investment',
            apiPath:'fileApi.upload',
            param:{},
            fun:(e)=>{
              editForm[e.item.key].push({
                  fileName:e.fileName,
                  fileUrlKey:e.fileUrlKey
              });
            }
        }
    },
];

const queryFields = [
    {
        label:'项目名称',
        type:'input',
        key:'projectName',
        required: false,
        disabled:true,
        width:300
    },
    {
        label:'会议名称',
        type:'input',
        key:'meetingName',
        required: false,
        disabled:true,
        width:300
    },
    {
        label:'参会人员',
        type:'input',
        key:'participants',
        required: false,
        disabled:true,
        width:300
    },
    {
        label:'会议类型',
        type:'input',
        key:'typeName',
        required: false,
        disabled:true,
        width:300
    },
    {
        label:'会议时间',
        type:'input',
        key:'dateTime',
        required: false,
        disabled:true,
        width:300
    },
    {
        label:'会议内容',
        type:'input',
        key:'meetingContext',
        required: false,
        disabled:true,
        width:300
    },
    {
        label: '会议结果',
        type:'select',
        key:'status',
        width:300,
        required: false,
        clearable:true,
        disabled:true,
        placeholder:'请选择会议结果',
        message:'请选择会议结果',
        event:'change',
        options:{
            labelKey:'label',
            valueKey:'value',
            list:[
                {
                    label:'驳回',
                    value:-1
                },
                {
                    label:'通过',
                    value:1
                }
            ]
        },
    },
    {
        label: '会议附件',
        type:'slot',
        key:'fileList',
        width:300,
    }
];


/**
 * 提交会议结果
 */
const publicFormPopupRef = ref(null);
const onSubmitResult = (row) => {
    for (let k1 in row){
        for (let k2 in editForm){
            if(k1!=='fileList'){
                if(k1 === k2){
                    editForm[k2] = row[k1];
                }
            }
        }
    }
    publicFormPopupRef.value.open();
}

/**
 * 查看详情
 */
const publicFormPopupRef2 = ref(null);
const onDetails = (row) => {
    investmentDailyApi.getProjectInvestmentDaily(row.meetingId).then(res=>{
        if(res.code === '200'){
            for (let k1 in res.data){
               for (let k2 in editForm){
                       if(k1 === k2){
                           editForm[k2] = res.data[k1];
                       }
               }
           }
        }
    });
    publicFormPopupRef2.value.open();
}

/**
 * 下载
 */
const download = (item) => {
    let arr = item.fileName.split('.');
    fileApi.download(item.fileUrlKey).then(res=>{
        if(res){
            exportFile(res,arr[0],arr[1]);
        }
    });
}

onMounted(()=>{
    getData({
        pageNum:1,
        pageSize:10,
        param:{
            projectId: getProjectId
        }
    });
});
</script>

<style lang="scss" scoped>

</style>
